<page-header title="客户分组" [breadcrumb]="breadcrumb" [action]="action">
    <ng-template #breadcrumb>
        <ql-breadcrumb separator="/">
            <ql-breadcrumb-item>客户管理</ql-breadcrumb-item>
            <ql-breadcrumb-item>客户分组</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
    <ng-template #action>
        <ql-button size="small" type="primary" routerLink="/customer/add-group">创建分组</ql-button>
    </ng-template>
</page-header>

<ql-card>
    <data-form (submit)="onRefresh()">
        <ql-form-item label="群组名称">
            <ql-input [(ngModel)]="groupname"></ql-input>
        </ql-form-item>
        <ql-form-item label="群组状态">
          <ql-select [(ngModel)]="groupstatus">
            <ql-option *ngFor="let item of dictService.getDict('group_state')" [label]="item.paramLabel" [value]="item.paramValue"></ql-option>
          </ql-select></ql-form-item>
    </data-form>

    <data-table [model]="groupList" [cursor]="cursorService" (cursor-change)="onRefresh()">
        <ql-table-column model-key="groupcode" label="群组编号"> </ql-table-column>
        <ql-table-column model-key="groupname" label="群组名称"> </ql-table-column>
        <ql-table-column model-key="groupdescription" label="群组描述"> </ql-table-column>
        <!--<ql-table-column model-key="createtime" label="创建时间"> </ql-table-column>-->
        <ql-table-column model-key="clerkname" label="创建人"> </ql-table-column>
        <ql-table-column model-key="groupcount" label="群组客户数"> </ql-table-column>
        <ql-table-column model-key="groupstatus" label="群组状态">
          <ng-template #slot let-scope="scope">
            {{scope.rowData.groupstatus | dict:'group_state'}}
          </ng-template>
        </ql-table-column>
        <ql-table-column label="操作" width="280">
            <ng-template #slot let-scope="scope">
                <ql-button type="text" (click)="editGroup(scope.rowData)">编辑</ql-button>
                <ql-button type="text" (click)="queryCustomer()">群组成员查询</ql-button>
                <ql-button type="text" (click)="delFun(scope.rowData.groupno)">删除</ql-button>
            </ng-template>
        </ql-table-column>
    </data-table>

    <!-- 编辑群组 -->
    <div class="box-card" #card>
        <ql-dialog [title]="'修改群组'" [(visible)]="attrDialog">
          <formio [form]="groupForm" [submission]="groupFormData" (submit)="save()" (customEvent)="cancel()"></formio>
        </ql-dialog>
    </div>
</ql-card>

<!--<ng-template #groupItemEdit>-->
    <!--<formio [form]="groupForm" [submission]="groupFormData" (submit)="save()" (customEvent)="cancel()"></formio>-->
<!--</ng-template>-->

<!-- 查看对应客户 -->
<ng-template #searchList>
    <ql-card>
        <data-table [model]="customerList">
            <ql-table-column model-key="ctCode" label="客户编号" width="80"> </ql-table-column>
            <ql-table-column model-key="ctName" label="客户姓名" width="80"> </ql-table-column>
            <ql-table-column model-key="ctsex" label="性别" width="80"> </ql-table-column>
            <ql-table-column model-key="ctage" label="年龄" width="80"> </ql-table-column>
            <ql-table-column model-key="ctType" label="客户类型" width="80"> </ql-table-column>
            <ql-table-column model-key="ctLevel" label="客户等级" width="80"> </ql-table-column>
            <ql-table-column model-key="ctTel" label="客户电话" width="80"> </ql-table-column>
            <ql-table-column model-key="time" label="开户时间" width="80"> </ql-table-column>
            <ql-table-column model-key="assest" label="客户资产" width="80"> </ql-table-column>
            <ql-table-column model-key="AUM" label="AUM" width="80"> </ql-table-column>
            <ql-table-column model-key="productnum" label="持有产品数" width="90"> </ql-table-column>
            <ql-table-column model-key="interaTime" label="互动时间" width="80"> </ql-table-column>
            <ql-table-column label="操作" width="80">
                <ng-template #slot let-scope="scope">
                    <ql-button type="text" [routerLink]="['/customer/customer-detail']" (click)="modal.close()">详情</ql-button>
                </ng-template>
            </ql-table-column>
        </data-table>
    </ql-card>
</ng-template>
